<template>
    <div class="login">
        <!-- 中山大学深圳校区智慧管理平台 -->
        <div class="systemname">IBMS管理平台</div>
        <div class="loginback">
           
        <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
            class="demo-ruleForm login-container">
            <div class="title">系统登录</div>
            <el-form-item prop="account">
                <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item  prop="checkPass">
                <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码"
                    @keyup.enter.native="handleSubmit2"></el-input>
            </el-form-item>
            <!-- <el-form-item style="margin-top:20px;" prop="checkPass">
            <el-select v-model="ruleForm2.grantType" placeholder="授权类型">
              <el-option
                v-for="item in grantType"
                :key="item.value"
                :label="item.label"
                :value="item.value"> 
              </el-option>
            </el-select>
          </el-form-item> -->
            <el-checkbox v-model="checked" @change="changeChe" class="remember">记住密码</el-checkbox>
            <el-form-item class="denglu">
                <el-button class="dlbutton" @click.native.prevent="handleSubmit2" :loading="logining">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
        
    </div>
    <div class="placeholder"></div>
    </div>
</template>

<script>
    import md5 from 'js-md5'
    import { login, salt } from '../url/api';
    import Store from '../assets/js/store';
    import { mapMutations, mapActions } from 'vuex';
    export default {
        data() {
            return {
                logining: false,
                //   ruleForm2: {
                //       account: localStorage.getItem('phone') || '',
                //       password: localStorage.getItem('password') || '',
                //       grantType: 'password',
                //       tenantCode: '0038',
                //   },
                ruleForm2: {
                    account: localStorage.getItem('phone') || '',
                    password: localStorage.getItem('password') || '',
                    salt: '',
                    // grantType: 'password',
                    tenant: 'ubicell',
                },
                rules2: {
                    phone: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        //{ validator: validaePass }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        //{ validator: validaePass2 }
                    ],
                },
                grantType: [
                    //授权类型
                    {
                        value: 'captcha',
                        label: 'captcha',
                    },
                    {
                        value: 'refresh_token',
                        label: 'refresh_token',
                    },
                    {
                        value: 'password',
                        label: 'password',
                    },
                ],
                checked: eval(localStorage.getItem('checked')) || false,
            };
        },
        methods: {
            // 记住密码
            changeChe(e) {
                console.log(e);
                localStorage.setItem('checked', e);
            },
            handleSubmit2(ev) {
                this.logining = true;
                let params = this.ruleForm2;
                let che = eval(localStorage.getItem('checked'));
                if (che) {
                    localStorage.setItem('phone', this.ruleForm2.account);
                    localStorage.setItem('password', this.ruleForm2.password);
                } else {
                    localStorage.clear('phone');
                    localStorage.clear('password');
                }

                let saltdata = {
                    account: params.account
                }
                salt(saltdata).then((val) => {
                    if (val.data.ok) {
                        this.goLogin(val.data.data);
                    }
                })


            },
            goLogin(salt){
                // debugger
                let params = this.ruleForm2
                params.salt = salt;
                params.password = md5( md5(this.ruleForm2.password)+salt);
                console.log(params);
                // params.password = this.ruleForm2 
                        // debugger
                        login(params)
                            .then((res) => {
                                // debugger
                                if (res.data.ok === true) {
                                    let token = res.data.data.token || 1;
                                    let menus = res.data.data.menus;
                                    let userId = res.data.data.userId;
                                    let tenantCode = res.data.data.tenantCode;
                                    let backgroundImg = res.data.data.img;
                                    let orgId = res.data.data.orgId;
                                    localStorage.setItem('phone', this.ruleForm2.account);
                                    sessionStorage.setItem('userId', userId);
                                    sessionStorage.setItem('name', res.data.data.name);
                                    sessionStorage.setItem('Authorization', token);
                                    sessionStorage.setItem('tenantCode', tenantCode);
                                    sessionStorage.setItem('backgroundImg', backgroundImg);
                                    sessionStorage.setItem('orgId', orgId);
                                    sessionStorage.setItem('menus', JSON.stringify(menus));
                                    console.log('重定向', this.$route.query.redirect);
                                    if (this.$route.query.redirect) {
                                        console.log(111);
                                        this.$router.push({
                                            path: this.$route.query.redirect,
                                        });
                                    } else {
                                        console.log(222);
                                        this.$message.success('登陆成功');
                                        // this.$router.push('/home');
                                        this.$router.push({
                                            path:'/home', //'/demoZhongshan',
                                        });
                                        console.log(this.$route);
                                    }
                                } else {
                                    // debugger
                                    this.$message({
                                        message: res.data.message,
                                        type: 'error',
                                    });
                                }
                                this.logining = false;
                            })
                            .catch((error) => {
                                console.log(error);
                                // alert('登录失败')
                                this.logining = false;
                            });
            },
            ...mapMutations({
                getNewData: 'increment',
            }),
            ...mapActions({
                getActions: 'increment',
            }),
        },
        mounted() {
            this.getActions();
            // this.getNewData()
            // Store.commit('increment')
            console.log(Store.state);
        },
    };
</script>

<style lang="scss" scoped>
    .login {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #eee;
        flex-direction: column;
    }
    .systemname{
        font-size: 34px;
        font-weight: 900;
        font-style: italic;
        color: #007674;
        letter-spacing:5px;
    }

    .login-container {
        /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        width: 350px;
        margin-left: 475px;
        margin-top: 100px;

        /* padding: 35px 35px 15px 35px; */
        /* background: #fff; */
        /* border: 1px solid #eaeaea; */

        /* // box-shadow: 0 0 25px #cac6c6; */
        .title {
            /* margin: 0px auto 40px auto; */
            text-align: center;
            color: #505458;
            font-size:16px;
            margin-bottom:10px;
            font-weight: 600;
        }
        .denglu{
            text-align: center;
        }

        .remember {
            /* margin: 0px 0px 35px 0px; */
        }
    }
    .loginback{
        width: 1032px;
        height: 373px;
        /* background: url("../assets/img/loginback.png") no-repeat; */
        background: url("../assets/img/loginback1.png") no-repeat;
        /* line-height: 383px; */
        background-size: 100%;
    }
    .dlbutton{
        color: #fff;
        background-color: #007674;
    }
    .placeholder{
        width: 100%;
        height: 80px;
    }
</style>